<template>
  <div>
    <el-row>
      <!-- 左侧列表 -->
      <el-col :span="20">
        <div v-if="list != null">
          <div v-for="item in list" :key="item.id" class="div-list">
            <router-link target="_blank" :to="{ path: '/pointsGoods/details', query: {pointsGoodsId: item.id} }">
              <el-card shadow="hover">
                <el-row>
                  <el-col :span="6">
                    <img class="image" :src="item.defImg" style="height: 100px">
                  </el-col>

                  <el-col :span="14">
                    <div>
                      <h3 style="margin-bottom: 5px">{{ item.name }}</h3>
                      <span>发布于 {{ item.createTime }}</span>
                    </div>
                  </el-col>

                  <el-col :span="4">
                    <div class="div-price">
                      <p class="p-price"><span class="span-price">{{ item.price }}</span> 积分</p>
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </router-link>
          </div>
        </div>
        <div v-else>
          抱歉没有找到相关的积分商品
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "MyPointsGoodsList",
  // list为父组件传过来的商品列表
  // isMore为是否显示“浏览更多”
  props: ["list", "isMore", "tabId"],
  data() {
    return {};
  },

  created() {

  },

  methods: {}
};
</script>
<style scoped>

.div-list {
  width: 1000px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.image {
  width: 150px;
  border-radius: 5px;
}

.div-price {
  margin-top: 40px;
}

.div-left {
  margin-left: 10px;
  margin-top: 10px;
}

.div-type {
  margin-top: 5px;
  margin-bottom: 5px;
}

.div-price-search {
  margin-top: 10px;
}

.el-card {
  border-radius: 10px;
}

.p-price {
  color: #dc6423;
}

.p-price span {
  font-size: 20px;
}
</style>